@import "../../variable.less";
.@{prefix} {
  &-tabbar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-color);
    &-panel {
      flex: 1;
      overflow: hidden;
      overflow-x: scroll;
      scrollbar-width: none;
      white-space: nowrap;
    }
    &-item {
      margin: 0 6px;
      padding: 0 10px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      border: 1px solid;
      cursor: pointer;
      background-color: #fff;
      border-radius: 4px;
      gap: 8px;
      transition: all 0.2s;
      font-size: var(--font-size-base);
      &-text {
        white-space: nowrap;
      }
      &.active {
        background-color: var(--primary-color);
        color: #fff;
        .@{prefix}-icon {
          color: #fff;
        }
      }
      &.dragging {
        background-color: transparent;
        border: 1px dashed #ddd;
        color: transparent;
        position: relative;
        .@{prefix}-icon {
          color: transparent;
        }
      }
    }
    &-item-active {
      background-color: var(--primary-color);
      color: #fff;
      .@{prefix}-icon {
        color: #fff;
      }
    }
    &-icon-button {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background-color: transparent;
      cursor: pointer;
      font-size: var(--font-size-medium);
      border-radius: var(--border-radius-base);
      transition: all 0.3s;
      &:hover {
        background-color: var(--primary-color);
        .@{prefix}-icon {
          color: #fff;
        }
      }
    }
  }
}